{% extends "base.html" %}

{% block title %}用户中心 - 车辆管理系统{% endblock %}

{% block content %}
<h2 class="mb-4">用户中心</h2>

<div class="d-flex justify-content-end mb-3">
    <a href="{{ url_for('user_profile') }}" class="btn btn-outline-primary">
        <i class="fas fa-user-cog"></i> 个人资料管理
    </a>
</div>

<div class="row">
    <!-- 左侧：我的车辆 -->
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">我的车辆</h5>
                <a href="{{ url_for('add_vehicle') }}" class="btn btn-sm btn-primary">添加车辆</a>
            </div>
            <div class="card-body">
                {% if vehicles %}
                    <ul class="list-group">
                        {% for vehicle in vehicles %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ vehicle.plate_number }}</strong><br>
                                    <small>{{ vehicle.vehicle_type }} - {{ vehicle.color }}</small>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-center text-muted">您还没有添加车辆</p>
                {% endif %}
            </div>
        </div>
        
        <!-- 停车场状态 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">停车场状态</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    {% for lot in parking_lots %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-1">{{ lot.name }}</h6>
                                {% if lot.available_spaces > 0 %}
                                    <span class="badge bg-success">可用</span>
                                {% else %}
                                    <span class="badge bg-danger">已满</span>
                                {% endif %}
                            </div>
                            <p class="mb-1">地址: {{ lot.address }}</p>
                            <small>
                                <strong>费率:</strong> ¥{{ lot.hourly_rate }}/小时<br>
                                <strong>车位:</strong> {{ lot.available_spaces }}/{{ lot.total_spaces }}
                            </small>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- 中间：进入/离开停车场 -->
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">停车场操作</h5>
            </div>
            <div class="card-body">
                {% if not vehicles %}
                    <div class="alert alert-warning">请先添加车辆才能使用停车场功能</div>
                {% else %}
                    <h6>进入停车场</h6>
                    
                    <!-- 添加摄像头识别选项 -->
                    <div class="mb-3 d-grid gap-2">
                        <a href="{{ url_for('camera_recognition') }}" class="btn btn-primary">
                            <i class="fas fa-camera"></i> 使用摄像头识别车牌
                        </a>
                    </div>
                    
                    <div class="text-center mb-3">
                        <span class="text-muted">- 或 -</span>
                    </div>
                    
                    <form action="{{ url_for('enter_parking') }}" method="post" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="parking_lot_id" class="form-label">选择停车场</label>
                            <select class="form-select" id="parking_lot_id" name="parking_lot_id" required>
                                <option value="" selected disabled>请选择停车场</option>
                                {% for lot in parking_lots %}
                                    <option value="{{ lot.id }}" {% if lot.available_spaces <= 0 %}disabled{% endif %}>
                                        {{ lot.name }} (¥{{ lot.hourly_rate }}/小时) - 
                                        {% if lot.available_spaces > 0 %}
                                            剩余{{ lot.available_spaces }}个车位
                                        {% else %}
                                            已满
                                        {% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="plate_image" class="form-label">上传车牌图片</label>
                            <input class="form-control" type="file" id="plate_image" name="plate_image" accept="image/*">
                            <div class="form-text text-muted">支持jpg、jpeg、png、gif格式，不上传将使用演示图片</div>
                        </div>
                        
                        <!-- 图片预览区 -->
                        <div class="mb-3">
                            <img id="image-preview" class="img-fluid border" style="max-height: 150px; display: none;" alt="车牌预览">
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-success">进入停车场</button>
                        </div>
                    </form>
                    
                    <!-- 预约按钮 -->
                    <div class="mt-4 mb-2">
                        <h6>预约停车位</h6>
                        <div class="d-grid">
                            <a href="{{ url_for('reserve_parking_form') }}" class="btn btn-outline-primary">
                                <i class="fas fa-calendar-alt"></i> 预约停车位
                            </a>
                        </div>
                    </div>
                    <div class="d-grid mt-2">
                        <a href="{{ url_for('view_reservations') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-list"></i> 查看我的预约
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 右侧：当前停车记录和预约 -->
    <div class="col-md-4">
        <!-- 当前停车 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">当前停车记录</h5>
            </div>
            <div class="card-body">
                {% if active_parkings %}
                    <ul class="list-group">
                        {% for record in active_parkings %}
                            <li class="list-group-item">
                                <div class="mb-2">
                                    <strong>车牌号：</strong> {{ record.plate_number }}<br>
                                    <strong>停车场：</strong> {{ record.parking_lot_name }}<br>
                                    <strong>入场时间：</strong> {{ record.entry_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                </div>
                                <form action="{{ url_for('exit_parking', record_id=record.id) }}" method="post">
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-danger btn-sm">离开停车场</button>
                                    </div>
                                </form>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-center text-muted">当前没有停车记录</p>
                {% endif %}
            </div>
        </div>
        
        <!-- 有效预约 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">有效预约</h5>
            </div>
            <div class="card-body">
                {% if active_reservations %}
                    <ul class="list-group">
                        {% for reservation in active_reservations %}
                            <li class="list-group-item">
                                <div class="mb-2">
                                    <strong>车牌号：</strong> {{ reservation.plate_number }}<br>
                                    <strong>停车场：</strong> {{ reservation.parking_lot_name }}<br>
                                    <strong>预约时间：</strong> {{ reservation.reservation_time.strftime('%Y-%m-%d %H:%M') }}<br>
                                    <strong>有效期至：</strong> {{ reservation.expiration_time.strftime('%Y-%m-%d %H:%M') }}
                                </div>
                                <form action="{{ url_for('cancel_reservation', reservation_id=reservation.id) }}" method="post">
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-warning btn-sm">取消预约</button>
                                    </div>
                                </form>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-center text-muted">当前没有有效预约</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 停车历史记录 -->
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0">停车历史记录</h5>
    </div>
    <div class="card-body">
        {% if parking_history %}
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>车牌号</th>
                            <th>停车场</th>
                            <th>入场时间</th>
                            <th>出场时间</th>
                            <th>停车费用</th>
                            <th>支付状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for record in parking_history %}
                            <tr>
                                <td>{{ record.plate_number }}</td>
                                <td>{{ record.parking_lot_name }}</td>
                                <td>{{ record.entry_time.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                <td>{{ record.exit_time.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                <td>¥{{ "%.2f"|format(record.fee) }}</td>
                                <td>
                                    {% if record.payment_status == 'paid' %}
                                        <span class="badge bg-success">已支付</span>
                                    {% else %}
                                        <span class="badge bg-warning">未支付</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-center text-muted">暂无停车历史记录</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 图片预览功能
    document.addEventListener('DOMContentLoaded', function() {
        const fileInput = document.getElementById('plate_image');
        const imagePreview = document.getElementById('image-preview');
        
        if (fileInput && imagePreview) {
            fileInput.addEventListener('change', function() {
                if (fileInput.files && fileInput.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        imagePreview.src = e.target.result;
                        imagePreview.style.display = 'block';
                    }
                    
                    reader.readAsDataURL(fileInput.files[0]);
                }
            });
        }
    });
</script>
{% endblock %} 